<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf8"/>
    <style type="text/css">
        table {
            border: 1px solid #233233;
            border-collapse: collapse;
            word-break: break-word;
        }
        td {
            border: 1px solid #233233;
            border-collapse: collapse;
            padding: 8px 14px;
            min-width: 50px;
        }
    </style>
</head>
<body>
<label class="button">选择交割单文件<input type="file" id="bfile"></label>
<br>
<button class="button" id="test" onclick="btnClick(id)">所有股票</button>
<br>
<pre id="output" css="table-layout: auto">Results will be displayed here</pre>
</body>
<script src='./dist/sql-wasm.js' type="text/javascript"></script>
<script>
    let db;
    const dbFileElm = document.getElementById('bfile');
    dbFileElm.onchange = () => {
        const f = dbFileElm.files[0];
        const r = new FileReader();
        r.onload = function () {
            const Units = new Uint8Array(r.result);
            const config = {
                locateFile: filename => `./dist/${filename}`
            };
            initSqlJs(config).then(function (SQL) {
                db = new SQL.Database(Units);
            });
        }
        r.readAsArrayBuffer(f);
    }

    var outputElm = document.getElementById('output');
    function btnClick(id) {
        // const stmt = db.prepare("SELECT `name`, `sql` FROM `sqlite_master` WHERE type='table'");
        // stmt.getAsObject(); // {col1:1, col2:111}
        // // Bind new values
        // // stmt.bind({$start: 1, $end: 2});
        // while (stmt.step()) { //
        //     const row = stmt.getAsObject();
        //     console.log('Here is a row: ' + JSON.stringify(row));
        // }
        var results = db.exec("select `code`,`name` from `check_list` group by `code`");
        for (var i = 0; i < results.length; i++) {
            outputElm.appendChild(tableCreate(results[i].columns, results[i].values));
        }
        console.log(c)
    }

    var tableCreate = function () {
        function valconcat(vals, tagName) {
            if (vals.length === 0) return '';
            var open = '<' + tagName + '>', close = '</' + tagName + '>';
            return open + vals.join(close + open) + close;
        }
        return function (columns, values) {
            var tbl = document.createElement('table');
            tbl.setAttribute("class", "table")
            var html = '<thead>' + valconcat(columns, 'th') + '</thead>';
            var rows = values.map(function (v) { return valconcat(v, 'td'); });
            html += '<tbody>' + valconcat(rows, 'tr') + '</tbody>';
            tbl.innerHTML = html;
            return tbl;
        }
    }();


    // The `initSqlJs` function is globally provided by all of the main dist files if loaded in the browser.
    // We must specify this locateFile function if we are loading a wasm file from anywhere other than the current html page's folder.
    // config = {
    // locateFile: filename => `./dist/${filename}`
    // }
    // initSqlJs(config).then(function(SQL){
    //     const db = new SQL.Database();        //Create the database
    //     db.run("CREATE TABLE test (col1, col2);");        // Run a query without reading the results
    //     db.run("INSERT INTO test VALUES (?,?), (?,?)", [1,111,2,222]);
    //
    //     // Prepare a statement
    //     const stmt = db.prepare("SELECT * FROM test WHERE col1 BETWEEN $start AND $end");
    //     stmt.getAsObject({$start:1, $end:1}); // {col1:1, col2:111}
    //
    //     // Bind new values
    //     stmt.bind({$start:1, $end:2});
    //     while(stmt.step()) { //
    //         var row = stmt.getAsObject();
    //         console.log('Here is a row: ' + JSON.stringify(row));
    //     }
    // });
</script>
</html>
